<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布信息</title>
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
</head>
<body>
<!--thymeleaf引入头部导航栏-->
<div th:insert="~{comm/header::head}"></div>
<div class="container-fluid main-color">
    <div class="row main main-color">
        <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 main-left" >
            <h3><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp&nbsp&nbsp发布</h3>
            <hr>
            <form action="/publish" method="post" onSubmit="return beforeSubmit(this);">
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
                    <h5 id="titlediv" style="color: red">输入标题不能为空</h5>
                </div>
                <div class="form-group">
                    <label for="description">请补充说明</label>
                    <textarea name="description" id="description" class="form-control" rows="10" cols="30"></textarea>
                </div>
                <div class="form-group">
                    <label for="tag">标签</label>
                    <input type="text" class="form-control" id="tag" name="tag" placeholder="请输入标签，以逗号分隔">
                </div>
                <div class="row" style="right: auto">
                <div class="form-group col-xs-2 btn pull-right ">
                <label for="money" style="color: red">请输入悬赏价格</label>
                <input type="text-align:right" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" id="money" name="money" placeholder="请输入悬赏价格">
                    <h5 id="moneydiv" style="color: red">输入价格不能为空，且大于0</h5>
                </div>
                </div>
                <br><br>
                <button type="submit" class="btn btn-success" style="float: right" >发布</button>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 main-right" >
            <h3>注意事项</h3><br>
            这里用作提示注意事项<br>
            后续补充xx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>
            xxxxxxxx<br>

        </div>
    </div>
    <!--小猫-->
    <script>
        $("#titlediv").css("display","none");
        $("#moneydiv").css("display","none");
        function beforeSubmit(form){
            if(form.title.value==''){
                $("#titlediv").css("display","block");//显示div
                form.title.focus();
                return false;
            }
            if(form.money.value==''){
                $("#moneydiv").css("display","block");//显示div
                form.money.focus();
                return false;
            }
            if(form.money.value<=0){
                alert('悬赏金额需大于0');
                form.money.focus();
                return false;
            }
            return true;
        }
        L2Dwidget.init({
            // 更换模型地址前后都需要修改
            // 示例:"https://unpkg.com/live2d-widget-model-unitychan/assets/unitychan.model.json"
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
                "scale": 1
            },
            // 设置位置
            "display": {
                "position": "right",
                "width": 100,
                "height": 150,
                "hOffset": 30,
                "vOffset": 0
            },
            "mobile": {
                "show": true,
                "scale": 1.5
            },
            // 透明度设置
            "react": {
                "opacityDefault": .8,
                "opacityOnHover": 1
            }
        });

    </script>
</div>
</body>
</html>